<!-- 首页-底部广告组件 -->
<template>
	<view class="advertising">
		<u-row>
			<u-col>
				<view class="advertising-body">
					<u-col span="4" offset="0.7">
						<view class="advertising-title">
							<u--text bold size="20" text="热门活动" color="#502314"></u--text>
						</view>
					</u-col>
					<ul>
						<li>
							<view class="advertising-photo">
								<u--image :src="src" width="100%" height="300rpx" radius="30rpx"></u--image>
							</view>
						</li>
						<li>
							<view class="advertising-photo">
								<u--image :src="src" width="100%" height="300rpx"></u--image>
							</view>
						</li>
						<li>
							<view class="advertising-photo">
								<u--image :src="src" width="100%" height="300rpx"></u--image>
							</view>
						</li>
					</ul>
				</view>
			</u-col>
		</u-row>
	</view>
</template>

<script>
	export default {
		name:"indexAdvertising",
		data() {
			return {
				src:'https://cdn.uviewui.com/uview/album/1.jpg',
				
			};
		}
	}
</script>

<style lang="scss">
	//整体框架
	.advertising{
		background: linear-gradient(to right, #f6ba18, #feec4f);
		
		//广告栏框架
		.advertising-body{
			border-radius: 100rpx 100rpx 0 0;
			background-color: white;
			height: 200rpx;
			
			//标题
			.advertising-title{
				position: relative;
				top: 30rpx;
			}
			
			ul{
				position: relative;
				top: 50rpx;
				list-style-type: none;
				padding: 0;
				display: flex;  
				flex-direction: column;  
				justify-content: center;  
				align-items: center;  
				flex-wrap: wrap;
				
				li{
					width: 90%;
				}
				//广告图片
				.advertising-photo{
					height: 330rpx;
				}
			}
		}
	}
</style>